<template>
    <div>           
        <!-- 
            面包屑导航区
            注意：
                下方面包屑导航不能跳转到 /users 可能的原因是此时导航本身就已经是 /users
        -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>


        <!-- 卡片区 -->
        <el-card class="box-card">
            <!-- 搜索区 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input 
                        placeholder="请输入内容"                         
                        clearable                         
                    >
                        <el-button 
                            slot="append" 
                            icon="el-icon-search"                             
                        ></el-button>
                    </el-input>
                </el-col>                            
            </el-row>

            <!-- 订单列表数据 -->
            <el-table :data="orderlist" border stripe>
                <el-table-column></el-table-column>
                <el-table-column></el-table-column>
                <el-table-column></el-table-column>
                <el-table-column></el-table-column>
                <el-table-column></el-table-column>
                <el-table-column></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">                
                        <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
                        <el-button type="success" icon="el-icon-location" size="mini" @click="a"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>


        <!-- 展示物流进度的对话框 -->
        <el-dialog 
            title="物流进度" 
            :visible.sync="progressVisible" 
            width="50%"
            :append-to-body="true"            
        >
            <el-timeline>
                <el-timeline-item timestamp="2018/4/12" placement="top">
                <el-card>
                    <h4>更新 Github 模板</h4>
                    <p>王小虎 提交于 2018/4/12 20:46</p>
                </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2018/4/3" placement="top">
                <el-card>
                    <h4>更新 Github 模板</h4>
                    <p>王小虎 提交于 2018/4/3 20:46</p>
                </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2018/4/2" placement="top">
                <el-card>
                    <h4>更新 Github 模板</h4>
                    <p>王小虎 提交于 2018/4/2 20:46</p>
                </el-card>
                </el-timeline-item>
            </el-timeline>
        </el-dialog>
    </div>
</template>

<script>
// 此处是导入城市数据的 js 文件
import cityData from './citydata.js'

export default {
    data() {
        return {
            // 接收查询对象中的数据
            queryInfo: {
                query: '',      //理解为查询条件
                pagenum: 1,
                pagesize: 10,                
            },
            total: 0,
            orderlist: [],

            // 作为级联选择器中的数据源（城市名数据）
            cityData: cityData,    

            // 控制模态框显示隐藏
            progressVisible: false
        }
    },


    created() {        
        this.getOrderList()
    },


    methods: {
        // API 请求：查询获取列表数据
        async getOrderList() {
            const { data: res } = await this.$http.get('orders', {
                params: this.queryInfo
            })

            if (res.meta.status !== 200) {
                return this.$message.error('获取失败')
            }

            this.total = res.data.total
            this.orderlist = res.data.goods            

            console.log(res);   //ceshi
        },



        a() {
            this.progressVisible = true
        }
    },
}
</script>

<style lang="less" scoped>
// 引入 css 文件
// @import '../../plugins/timeline/timeline.css';
// @import '../../plugins/timeline-item/timeline-item.css'
</style>